<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blog-列表</title>
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/blog_list.css">
    <script src="./JS/login.js"></script>
    <script src="./JS/jquery.min.js"></script>
    <script>
         //检验登录状态
         checkLogin();
    </script>
</head>
<body>
    <!--导航栏-->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!--留白占位-->
        <span class="spacer"></span>
        <!--这是按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout" onclick="alert('注销成功')">注销</a>
        <a href="update.html">设置资料</a>
    </div>

    <!--页面内容-->
    <div class="container">

        <!--左侧个人简介-->
        <div class="container-left">
            <!--用户信息-->
            <div class="card">
                <img src="" alt="" class=".picture">
                <h3></h3>
                <div class="count">
                </div>
                <div class="count">
                </div>
            </div>
        </div>

        <!--右侧内容详情-->
         <div class="container-right">
            <!-- <div class="blog">
                <div class="title">这是一篇博客</div>
                <div class="date">2022-11-30 12:01</div>
                <div class="desc">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias quam culpa quo et! Autem nemo veniam officia qui exercitationem ratione neque blanditiis deleniti perferendis corporis. Aut aperiam molestias natus beatae?Lorem ipsum dolor sit, amet consectetur adipisicing elit. At repellat a excepturi aliquam temporibus fuga cumque in tempora minus et ea, placeat dolor illum ad repellendus tenetur molestiae quibusdam perspiciatis.</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div> -->
        </div> 
    </div>
    <script>
        function getBlogs(){
            $.ajax({
                type:"get",
                url:"blog",
                success:function(body){
                    let container_right=document.querySelector('.container-right');
                    for(let blog of body){
                        //创建blog块
                        let blogDiv=document.createElement("div");
                        blogDiv.className="blog";
                        //创建博客标题
                        let titleDiv=document.createElement("div");
                        titleDiv.className="title";
                        titleDiv.innerHTML=blog.title;
                        blogDiv.appendChild(titleDiv);
                        //创建日期
                        let dateDiv=document.createElement("div");
                        dateDiv.className="date";
                        dateDiv.innerHTML=blog.postTime;
                        blogDiv.appendChild(dateDiv);
                        //创建描述
                        let descDiv=document.createElement("div");
                        descDiv.className="desc";
                        descDiv.innerHTML=blog.content;
                        blogDiv.appendChild(descDiv);
                        //创建a标签
                        let a=document.createElement("a");
                        a.innerHTML="查看全文 >>";
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);
                        container_right.appendChild(blogDiv);
                    }
                }
            });
        }
        getBlogs();
    //获取当前用户信息
    function userInfo(){
        $.ajax({
            type:'get',
            url:'userInfo',
            success:function(body){
                let h3=document.querySelector('.card h3');
                h3.innerHTML=body.nickName;
                let picture=document.querySelector('.picture');
                picture.src=body.picture;

            }
        });
    }
    userInfo();
    </script>
</body>
</html>